<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>跑步中</title>
		<script src="https://webapi.amap.com/maps?v=2.0&key=78407fc70d134bc823f2e0d8d74fb1d6"></script>
	</head>
	<body class="running">
		<!-- 头部导航 -->
		<header id="header">
			<div>
				<p>户外跑</p>
				<strong>运动中</strong>
			</div>
			<div>
				<i class="iconfont icon-music"></i>
				<i class="iconfont icon-menu"></i>
			</div>
		</header>
		<!-- 总里程 -->
		<div id="mileage"><strong id="mileageNumber"></strong>公里</div>
		<!-- gps部分 -->
		<div id="gps">
			<p>GPS信号弱,数据精准度低</p>
			<i class="iconfont icon-map"></i>
		</div>
		<!-- 跑步数据部分 -->
		<section id="runningDate">
			<div id="speed">
				<i class="iconfont icon-speed"></i>
				<p>配速</p>
				<span id="spd">5m/s</span>
			</div>
			<div id="time">
				<i class="iconfont icon-time"></i>
				<p>用时</p>
				<span id="tme">00:00:00</span>
			</div>
			<div id="calorie">
				<i class="iconfont icon-calorie"></i>
				<p>千卡</p>
				<span id="calo"></span>
			</div>
		</section>
		<!-- 按钮区 -->
		<section id="btns">
			<div id="continue">
				<i class="iconfont icon-bofang"></i>
				继续
			</div>
			<div id="pause">
				<i class="iconfont icon-zanting"></i>
				暂停
			</div>
			<div id="end">
				<i class="iconfont icon-time"></i>
				结束
			</div>
		</section>
	</body>
</html>
